<template>
  <div class="contain">
    <div class="contain-header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>医生认证审核</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="contain-body">
      <div class="body-header">
        <el-form :inline="true" size="mini">
          <el-form-item label="医生姓名">
            <el-input placeholder="请输入医生姓名" v-model="page.realName"></el-input>
          </el-form-item>
          <el-form-item label="当前状态">
            <el-select placeholder="请选择当前状态" v-model="page.auditStatus" clearable>
              <el-option label="待审核" value="2"></el-option>
              <el-option label="审核通过" value="1"></el-option>
              <el-option label="审核驳回" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="findPage">查 询</el-button>
            <el-button type="primary" icon="el-icon-refresh" @click="reset">刷 新</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="body-table">
        <el-table
            :data="tableData"
            style="width: 100%">
          <el-table-column
              prop="createTime"
              label="申请时间"
              width="300"
              fixed
              align="center"
          >
          </el-table-column>
          <el-table-column
              prop="realName"
              show-overflow-tooltip
              label="医生名称"
              align="center"
          >
          </el-table-column>
          <el-table-column
              prop="sex"
              label="性别"
              align="center"
          >
            <template slot-scope="scope">
              {{scope.row.sex===1?'男':'女'}}
            </template>
          </el-table-column>
          <el-table-column
              prop="age"
              label="年龄"
              align="center"
          >
          </el-table-column>
          <el-table-column
              prop="idCard"
              label="身份证号"
              show-overflow-tooltip
              align="center"
          >
          </el-table-column>
          <el-table-column
              prop="connectionPhone"
              label="联系电话"
              show-overflow-tooltip
              align="center"
          >
          </el-table-column>
          <el-table-column
              prop="hospital"
              show-overflow-tooltip
              label="就职医院"
              align="center"
          >
          </el-table-column>
          <el-table-column
              prop="administrativeOffice"
              label="就职科室"
              align="center"
          >
          </el-table-column>
          <el-table-column
              prop="occupationTitle"
              label="职称"
              align="center"
          >
          </el-table-column>
          <el-table-column
              prop="hospitalLevel"
              label="医院等级"
              align="center"
          >
          </el-table-column>
          <el-table-column
              prop="workAddr"
              label="工作地址"
              show-overflow-tooltip
              align="center"
          >
          </el-table-column>
          <el-table-column
              prop="doctorIntroduction"
              label="医生介绍"
              show-overflow-tooltip
              align="center"
          >
          </el-table-column>
          <el-table-column
              prop="personalExpertise"
              label="专业擅长"
              show-overflow-tooltip
              align="center"
          >
          </el-table-column>
          <el-table-column
              label="医师执照"
              align="center"
          >
            <template slot-scope="scope">
              <el-image
                  @click="showImage(scope.row.doctorLicenceUrl)"
                  style="width: 50px; height: 30px"
                  :preview-src-list="srcList"
                  :src="scope.row.doctorLicenceUrl"
                  fit="contain"></el-image>
            </template>
          </el-table-column>
          <el-table-column
              label="审核状态"
              align="center"
          >
            <template slot-scope="scope">
              <el-tag :type="scope.row.auditStatus === 1 ? 'success' : scope.row.auditStatus === 2? 'info' : 'danger'" size="mini">
                {{ scope.row.auditStatus === 2 ? '待审核' : scope.row.auditStatus === 1 ? '审核通过' : '审核驳回' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
              label="操作"
              fixed="right"
              align="center"
          >
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="showSee(scope.row)">查 看</el-button>
            </template>
          </el-table-column>

        </el-table>
      </div>
      <div class="body-page">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.pageIndex"
            :page-sizes="[10, 15, 20, 25]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </div>


    <!--查看的弹窗-->
    <el-dialog
        title="医生认证审核"
        :visible.sync="seeDialog"
        width="45%"
    >
      <el-form inline size="mini" label-width="80px" :model="obj" >
        <el-form-item label="医生姓名">
          <el-input placeholder="请输入医生姓名" v-model="obj.realName" disabled></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input placeholder="请输入性别" v-model="obj.sex===1?'男':'女'" disabled></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input placeholder="请输入身份证号" v-model="obj.idCard" disabled></el-input>
        </el-form-item>
        <el-form-item label="就职医院">
          <el-input placeholder="请输入就职医院" v-model="obj.hospital" disabled></el-input>
        </el-form-item>
        <el-form-item label="就职科室">
          <el-input placeholder="请输入就职科室" v-model="obj.administrativeOffice" disabled></el-input>
        </el-form-item>
        <el-form-item label="职称">
          <el-input placeholder="请输入职称" v-model="obj.occupationTitle" disabled></el-input>
        </el-form-item>
        <el-form-item label="医院级别">
          <el-input placeholder="请输入医院级别" v-model="obj.hospitalLevel" disabled></el-input>
        </el-form-item>
        <el-form-item label="工作地址">
          <el-input placeholder="请输入工作地址" v-model="obj.workAddr" disabled></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input placeholder="请输入联系电话" v-model="obj.connectionPhone" disabled></el-input>
        </el-form-item>
        <el-form-item label="医生介绍">
          <el-tooltip class="item"  effect="dark" :content="obj.doctorIntroduction"  placement="top">
            <div slot="content" style="display: flex;justify-content: center;width: 200px">{{obj.doctorIntroduction}}</div>
            <el-input  autosize placeholder="请输入医生介绍" v-model="obj.doctorIntroduction" disabled></el-input>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="专业擅长">
          <el-tooltip class="item"  effect="dark" :content="obj.personalExpertise"  placement="top">
            <div slot="content" style="display: flex;justify-content: center;width: 200px">{{obj.personalExpertise}}</div>
            <el-input autosize placeholder="请输入专业擅长" v-model="obj.personalExpertise" disabled></el-input>
          </el-tooltip>
        </el-form-item>
<!--        <el-form-item label="性别">-->
<!--          <el-input placeholder="请输入性别" v-html="obj.sex===1?'男':'女'"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="身份证号">-->
<!--          <el-input placeholder="请输入身份证号" v-html="obj.idCard"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="就职医院">-->
<!--          <el-input placeholder="请输入就职医院" v-html="obj.hospital"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="就职科室">-->
<!--          <el-input placeholder="请输入就职科室" v-html="obj.administrativeOffice"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="职称">-->
<!--          <el-input placeholder="请输入职称" v-html="obj.occupationTitle"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="医院级别">-->
<!--          <el-input placeholder="请输入医院级别" v-html="obj.hospitalLevel"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="工作地址">-->
<!--          <el-input placeholder="请输入工作地址" v-html="obj.workAddr"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="联系电话">-->
<!--          <el-input placeholder="请输入联系电话" v-html="obj.connectionPhone"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="医生介绍">-->
<!--          <el-input autosize placeholder="请输入医生介绍" v-html="obj.doctorIntroduction"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="专业擅长">-->
<!--          <el-input autosize placeholder="请输入专业擅长" v-html="obj.personalExpertise"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="驳回意见">
          <el-input autosize placeholder="请输入驳回意见" :disabled="obj.auditStatus!==2" v-model="obj.refuseArgument"></el-input>
        </el-form-item>
        <el-form-item label="医生执照">
          <el-image style="width: 200px; height: 100px" :preview-src-list="srcList" @click="showImage(obj.doctorLicenceUrl)"
                    :src="obj.doctorLicenceUrl"></el-image>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="dealAudit(1)" size="mini" v-if="obj.auditStatus===2">审核通过</el-button>
				<el-button type="warning" @click="dealAudit(0)" size="mini"  v-if="obj.auditStatus===2">审核驳回</el-button>
        <el-button :type="obj.auditStatus===1?'primary':'warning'" @click="seeDialog = false" size="mini"  v-if="obj.auditStatus!==2">{{obj.auditStatus===1?'审核通过':'审核驳回'}}</el-button>
			</span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      seeDialog: false,
      srcList: [],
      page:{
        pageIndex:1,
        pageSize:10,
        realName: null,
        auditStatus:null
      },
      total:0,
      obj:{}
    }
  },
  created(){
    this.findPage()
  },
  methods: {
    dealAudit(auditStatus){
      if (auditStatus===0&&!this.obj.refuseArgument){
        return this.$message.warning('请输入驳回意见')
      }
      this.$confirm('确定'+(auditStatus===1?'通过':'驳回')+'该认证吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.obj.auditStatus = auditStatus
        this.axios.post('/admin-doctor-audit/dealDoctorAudit',this.obj).then(res=>{
          if (res.data.code===200){
            this.seeDialog = false
            this.findPage()
            this.$message.success(res.data.message)
          }
        })
      })
    },
    showSee(obj){
      this.obj = obj
      this.seeDialog = true
    },
    showImage(url){
      if (url){
        this.srcList = []
        this.srcList.push(url)
      }
    },
    reset(){
      this.page.realName=null
      this.page.pageIndex=1
      this.page.pageSize=10
      this.findPage()
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.findPage()
    },
    handleCurrentChange(val) {
      this.page.pageIndex = val
      this.findPage()
    },
    findPage(){
      this.axios.post('/admin-doctor-audit/findPage',this.page).then(res=>{
        if(res.data.code===200){
          this.tableData = res.data.data.data
          this.total = res.data.data.total
        }
      })
    }
  },
}
</script>

<style scoped lang="less">
.contain {
  width: 100%;
  height: 100%;

  /deep/ .el-input.is-disabled .el-input__inner,.el-textarea.is-disabled textarea,.el-date-editor--daterange.is-disabled.el-range-editor{
    background-color: #ffffff !important;
    color: #0c4070;
  }

  .contain-header {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
  }

  .contain-body {
    width: 100%;
    height: calc(100% - 50px);
    background-color: #fff;
    padding: 1%;
    box-sizing: border-box;

    .body-header {
      width: 100%;
      height: 50px;
    }

    .body-table {
      width: 100%;
      height: calc(100% - 120px);
    }

    .body-page {
      width: 100%;
      height: 70px;
      display: flex;
      align-items: center;
    }
  }
}
</style>
